<template>
  <a-tree
    v-if="loaded"
    :value="value"
    :checkedKeys="checkedKeys"
    @check="onSelect"
    checkable
    default-expand-all
    auto-expand-parent
    :tree-data="treeData"
    :replaceFields="{
      title: 'permissionName',
      key: 'permissionId',
    }"
  />
</template>

<script>
import { getPermissionTree } from "@/api/permission";
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      treeData: [],
      loaded: false,
    };
  },
  mounted() {
    getPermissionTree().then((res) => {
      this.checkedKeys = this.value;
      this.treeData = res.data;
      this.loaded = true;
    });
  },
  methods: {
    onSelect(e) {
      this.checkedKeys = e;
      this.$emit("input", e);
    },
  },
};
</script>
